<template>
	<div>
		<el-dialog
		  v-model="dialog.visible"
		  :title="dialog.title"
		  :close-on-click-modal="false"
		  destroy-on-close
		  append-to-body
		  width="450px"
		  class="custom-fun-form"
		  @close="resetForm"
		>

			<el-form
			  ref="parameterFormRef"
			  :model="parameterForm"
			  :rules="parameterRules"
			  label-width="100px"
			  label-position="top"
			>

				<el-form-item label="参数名称" prop="name">
				  <el-input v-model="parameterForm.name" placeholder="参数名称" />
				</el-form-item>
				
				<el-form-item label="标识符" prop="identifier">
				  <el-input v-model="parameterForm.identifier" placeholder="标识符" />
				</el-form-item>
				
				<el-form-item label="数据类型" prop="dataType" >
					<el-select v-model="parameterForm.dataType.type" placeholder="" style="width: 100%;" >
						<el-option label="字符串" value="text" />
						<el-option label="整数型" value="int" />
						<el-option label="单精度浮点型" value="float" />
						<el-option label="双精度浮点型" value="double" />
						<el-option label="布尔型" value="bool" />
						<el-option label="时间型" value="date" />
						<el-option label="枚举型" value="enum" />
						<el-option label="结构体" value="struct" />
						<el-option label="数组" value="array" />
						<el-option label="图片" value="img" />
						<el-option label="模型" value="model" />
						<el-option label="颜色" value="color" />
					</el-select>
				</el-form-item>
				
				<el-form-item label="数据长度" prop="textLength"  v-show="parameterForm.dataType.type=='text'" >
					<el-input v-model="textField.length" >
					  <template #append>字节</template>
					</el-input>
				</el-form-item>
				
				<!--int 、 float 、 double -->
				<el-form-item label="取值范围" prop="rangeForNumber"  v-show="parameterForm.dataType.type=='int' || parameterForm.dataType.type=='float' || parameterForm.dataType.type=='double'  ">
					 <div style="float: left;width: 201.5px;">
						<el-input v-model="numberField.min" />
					 </div>
					 <div style="margin-left: 10px;margin-right: 10px;"><span>~</span></div>
					 <div style="float: left;width: 201.5px;">
					 		<el-input v-model="numberField.max" />
					 </div>
				</el-form-item>
				
				<el-form-item label="步长" prop="stepForNumber"  v-show="parameterForm.dataType.type=='int' || parameterForm.dataType.type=='float' || parameterForm.dataType.type=='double'  ">
					  <el-input
					    v-model="numberField.step"
					  />
				</el-form-item>
				
				
				<el-form-item label="日期格式" prop="formatForDate" v-show="parameterForm.dataType.type=='date'">
					<el-input
					  v-model="dateField.format"
					/>
				</el-form-item>
				
				
				<el-form-item v-if="parameterForm.dataType.type=='bool' " label="布尔值" prop="boolField">
				  <el-row :gutter="24" style="margin-bottom: 4px;">
					<el-col :span="3" :offset="1" style="font-weight: 600;">
					  0-
					</el-col>
					<el-col :span="20">
					  <el-form-item>
						<el-input v-model="boolField.false" placeholder="如：关" />
					  </el-form-item>
					</el-col>
				  </el-row>
				  <el-row :gutter="24">
					<el-col :span="3" :offset="1" style="font-weight: 600;">
					  1-
					</el-col>
					<el-col :span="20">
					  <el-form-item>
						<el-input v-model="boolField.true" placeholder="如：开" />
					  </el-form-item>
					</el-col>
				  </el-row>
				</el-form-item>
				
				
				
				<el-form-item v-if="parameterForm.dataType.type=='enum' " label="枚举项" prop="enum">
				  <el-row :gutter="24">
					<el-col :span="11">
					  参数值
					  <el-tooltip class="item" effect="dark" content="支持整型，取值范围：-2147483648 ~ 2147483647" placement="top-start">
						<el-icon><QuestionFilled /></el-icon>
					  </el-tooltip>
					</el-col>
					<el-col :span="11" :offset="1">
					  参数描述
					  <el-tooltip
						class="item"
						effect="dark"
						content="支持中文、英文大小写、日文、数字、下划线和短划线，必须以中文、英文或数字开头，不超过20个字符"
						placement="top-start"
					  >
						<el-icon><QuestionFilled /></el-icon>
					  </el-tooltip>
					</el-col>
				  </el-row>
		
				  <el-row v-for="(item, index) in enumField.items" :key="index" :gutter="24" style="margin-bottom: 4px;">
					<el-col :span="9">
					  <el-form-item>
						<el-input v-model="item.value" />
					  </el-form-item>
					</el-col>
					<el-col :span="2">
					  --
					</el-col>
					<el-col :span="9">
					  <el-form-item>
						<el-input v-model="item.label" />
					  </el-form-item>
					</el-col>
					<el-col :span="4">
					  <el-button link type="primary" @click="removeEnumItem(index)">删除
					  </el-button>
					</el-col>
				  </el-row>
				  <el-row>
					<el-button :icon="Plus" link type="primary" @click.stop="addEnumItem" >添加枚举项</el-button>
				  </el-row>
				</el-form-item>
				
				  <el-form-item v-if="parameterForm.dataType.type=='array' " label="元素类型">
					  <el-radio-group v-model="arrayField.type" style="margin-left: 4px;" @change="arrayTypeChange">
						<el-radio label="int32">int32</el-radio>
						<el-radio label="float">float</el-radio>
						<el-radio label="double">double</el-radio>
						<el-radio label="text">text</el-radio>
						<el-radio label="struct">struct</el-radio>
					  </el-radio-group>
					</el-form-item>

					<el-form-item v-if="parameterForm.dataType.type=='array' " label="元素个数">
					  <el-input v-model="arrayField.count" />
					</el-form-item>

					<el-form-item v-if="parameterForm.dataType.type=='struct' || (parameterForm.dataType.type=='array' && arrayField.type=='struct') " label="JSON 对象" prop="jsonObj">
					  <el-row
						v-for="(item, index) in json"
						:key="index"
						:gutter="24"
						style="margin-left: 0px; margin-right: 0px; margin-bottom: 4px; background-color: #E3F2fd;"
					  >
						<el-col :span="17">
						  {{ "参数名称:"+item.name }}
						</el-col>
						<el-col :span="7">
						  <el-button link type="primary" @click="editJson(item,index)">编辑</el-button>
						  <span style="padding: 0.3125rem;">|</span>
						  <el-button link type="primary" @click="deleteJson(index)">删除</el-button>
						</el-col>
					  </el-row>
					  <el-row>
						<el-button :icon="Plus" link type="primary" @click.stop="addParameter" >新增参数</el-button>
					  </el-row>
					</el-form-item>				
			</el-form>

			<template #footer>
			  <div class="dialog-footer">
				<el-button type="primary" @click="submitForm"  :loading="loading">确 定</el-button>
				<el-button @click="closeDialog" :loading="loading">取 消</el-button>
			  </div>
			</template>
		</el-dialog>
		<!-- <EditParameter ref="parameterRef"/> -->
	</div>
</template>

<script lang="ts" setup>
	import {ref,defineEmits } from 'vue'
	import type {FormRules } from 'element-plus'
	import { Plus,QuestionFilled } from '@element-plus/icons-vue'
	/* import EditParameter from "./EditParameter.vue"; */
	
	const loading = ref(false);
	const dialog = ref({
		visible:false,
		title:'',
	});
	
	const parameterFormRef=ref();
	const parameterForm=ref({
		name:'',
		identifier:'',
		required:false,
		accessMode:'rw',
		dataType:{
			type:'text',
			specs:null
		}
	})
	
	const parameterRules=reactive<FormRules>({
	  name: [{ required: true, message: "参数必填", trigger: "blur" }],
	  identifier: [{ required: true, message: "参数必填", trigger: "blur" }],
	  required: [{ required: true, message: "参数必填", trigger: "blur" }],
	  accessMode: [{ required: true, message: "参数必填", trigger: "blur" }],
	  dataType: [{ required: true, message: "参数必填", trigger: "blur" }],
	});
	
	const numberField=ref({
			min:null,
			max:null,
			step:null
		}
	);
	
	const textField=ref({
			length:null,
		}
	);
	
	const dateField=ref({
			format:null,
		}
	);
	
	const boolField=ref({
		true:'',
		false:''
	})
	
	const enumField=ref({
		items:[]
	})
	
	const arrayField=ref({
		type: 'int32',
		count: 10
	})
	
	const json=ref([])
	
	
	const openDialog=(row:any)=>{
		if(row){
			dialog.value.visible=true;
			dialog.value.title='编辑参数';
			parameterForm.value=row;
		}else{
			dialog.value.visible=true;
			dialog.value.title='新增参数';
			parameterForm.value={
				name:'',
				identifier:'',
				required:false,
				accessMode:'rw',
				dataType:{
					type:'text',
					specs:null
				}
			};
		}
	}
	
	 const addEnumItem=()=> { /* 添加枚举项 */
	      enumField.value.items.push({
	        value: '',
	        desc: ''
	      })
	}

	const removeEnumItem=(index:any)=> { /* 删除枚举项 */
      enumField.value.splice(index, 1)
    }
	
	//const parameterRef=ref();
	const addParameter=()=>{
		//parameterRef.value.openDialog();
	}
	
	const editJson=(item:any, index:number)=> {
	      // this.currentParameter = '0'
	      // this.parameterPane.visible = true
	      // this.parameterPane.data = item
	      // this.parameterPane.index = index
	}
	
	const deleteJson=(index:number)=> {
	      json.value.splice(index, 1)
	}
	
	const submitForm=()=>{
		parameterFormRef.value.validate((isValid: boolean) => {
		  if (isValid) {
				if(parameterForm.value.dataType.type=='text'){
					parameterForm.value.dataType.specs=textField.value;
				}
				else if(parameterForm.value.dataType.type=='int' || parameterForm.value.dataType.type=='float' || parameterForm.value.dataType.type=='double'){
					parameterForm.value.dataType.specs=numberField.value;
				}
				else if(parameterForm.value.dataType.type=='date'){
					parameterForm.value.dataType.specs=dateField.value;
				}
				else if(parameterForm.value.dataType.type=='bool'){
					parameterForm.value.dataType.specs=boolField.value;
				}
				else if (parameterForm.value.dataType.type === 'struct') {
					parameterForm.value.dataType.specs=json.value;
				}
				else if (parameterForm.value.dataType.type === 'enum') {
					parameterForm.value.dataType.specs=enumField.value;
				}
				else if (parameterForm.value.dataType.type === 'array') {
					if(arrayField.value.type=='struct'){
						parameterForm.value.dataType.specs={
							type:arrayField.value.type,
							size:arrayField.value.count,
							items:json.value
						}
					}else{
						parameterForm.value.dataType.specs={
							type:arrayField.value.type,
							size:arrayField.value.count
						}
					}
				}
				console.log(parameterForm.value)
		  }
		});
	}
	
	
	const emits = defineEmits(['closeDialog'])
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
		emits('closeDialog',parameterForm.value)
		resetForm();
	}
	
	/**
	 * 重置表单
	 */
	function resetForm() {
		parameterFormRef.value.resetFields();
		parameterFormRef.value.clearValidate();
		parameterForm.value={
			name:'',
			identifier:'',
			required:false,
			accessMode:'rw',
			dataType:{
				type:'text',
				specs:null
			}
		};
	}	
	
	defineExpose({
	  openDialog,closeDialog
	});
	
	onMounted(() => {
	});
</script>

<style scoped>

	.custom-fun-form /deep/ .el-dialog__body {
    padding: 0 24px 8px;
  }

  .custom-fun-form /deep/ .el-form--label-top .el-form-item__label {
      padding: 0 0 0 0;
  }

  .custom-fun-form /deep/ .el-form-item--medium .el-form-item__label {
      line-height: 25px;
  }

  .custom-fun-form /deep/ .el-form-item {
      margin-bottom: 12px;
  }
</style>